<template>
  <view>
    <view style="margin: 10rpx 25rpx 45rpx 25rpx;">
      <uni-easyinput type="textarea" :autoHeight="true" :inputBorder="false" :maxlength="2000" :trim="true"
        v-model="press.content" placeholder="今天你有什么趣事和大家分享？" placeholderStyle="font-size: 18px;" />

      <!-- 表情、图片、视频图标点击 -->
      <view class="expression-img-video">
        <view>
          <image class="select-icon" src="/static/releaseConsultingView/expression.svg" @click="openExpression"></image>
          <image class="select-icon"
            :src="press.pressImagesList && press.pressImagesList.length  <  9 ? '/static/releaseConsultingView/image.svg' : '/static/releaseConsultingView/imageDisable.svg'"
            @click="openImage">
          </image>
          <!--          <image class="select-icon"
            :src="filesImageList.length == 0 && filesVideoList.length < 1 ? '/static/releaseConsultingView/video.svg' : '/static/releaseConsultingView/videoDisable.svg'"
            @click="openVideo"></image> -->
        </view>
        <view class="content-record">{{press.content.length}}字</view>
      </view>

      <view class="file-picker__container">
        <!-- 显示图片文件 -->
        <view class="file-picker__box" v-for="(item,index) in press.pressImagesList" :key="index">
          <view class="file-picker__box-content" style="border: 1px solid #eee;">
            <!-- 上传位置 -->
            <image class="file-image" :src="item.substr(0,4) == 'file' || item.substr(0,4) == 'blob' ? item : $url+item"
              mode="aspectFill" @click="previewImage(item,index)"></image>
            <view class="icon-del-box" @click="delImageFile(index)">
              <view class="icon-del"></view>
              <view class="icon-del rotate-del"></view>
            </view>
          </view>
        </view>

        <!-- 显示视频文件 -->
        <view class="file-picker__box" v-for="(item,index) in filesVideoList" :key="index">
          <view class="file-picker__box-content" style="border: 1px solid #eee;">
            <!-- 上传位置 -->
            <video class="file-image" :src="item" :controls='false' :autoplay='false' :show-center-play-btn="false"
              auto-pause-if-navigate>
              <image class="file-image" style="z-index: 999;" :src="item" mode="aspectFill"></image>
            </video>

            <view class="icon-del-box" @click="delVideoFile(index)">
              <view class="icon-del"></view>
              <view class="icon-del rotate-del"></view>
            </view>
          </view>
        </view>

        <!-- 加号 -->
        <view class="file-picker__box"
          v-if="press.pressImagesList && press.pressImagesList.length < 9 && filesVideoList.length == 0">
          <view class="file-picker__box-content is-add" style="border: 1px solid #eee;" @click="choose">
            <view class="icon-add"></view>
            <view class="icon-add rotate-add"></view>
          </view>
        </view>
      </view>

      <!-- 表情选择弹出框 -->
      <uni-popup ref="popupExpression" maskBackgroundColor="#55585a+7a" type="bottom">
        <!-- 选择表情，轮播图选择 -->
        <swiper class="select-expression" :indicator-dots="true" :autoplay="false" :duration="300">
          <swiper-item>
            <view id="swiperDom">
              <view style="padding-bottom: 100rpx;">
                <uni-grid :column="7" :showBorder="false" :Boolean="false">
                  <uni-grid-item style="" v-for="(item,index) in expressionListOne" :key="index">
                    <view class="display-default" style="width: 100%;height: 100%;" @click="expressionItemClick(item)">
                      <text style="font-size: 22px;">{{item}}</text>
                    </view>
                  </uni-grid-item>
                </uni-grid>
              </view>
            </view>
          </swiper-item>
          <swiper-item>
            <view id="swiperDom">
              <view style="padding-bottom: 100rpx;">
                <uni-grid :column="7" :showBorder="false">
                  <uni-grid-item style="" v-for="(item,index) in expressionListTwo" :key="index">
                    <view class="display-default" style="width: 100%;height: 100%;" @click="expressionItemClick(item)">
                      <text style="font-size: 22px;">{{item}}</text>
                    </view>
                  </uni-grid-item>
                </uni-grid>
              </view>
            </view>
          </swiper-item>
        </swiper>
      </uni-popup>
    </view>

    <!-- 当前咨询分类是否发布的时候需要填写联系方式 -->
    <view v-show="press.isContact == 'Y' || press.isContact == 'Y-N'">
      <!-- 请选择联系方式 -->
      <view style="padding: 25rpx;">
        <text style="font-size: 17px;">请选择联系方式</text>
        <text v-show="press.isContact == 'Y'" style="color: red;">（必须填一个）</text>
        <text v-show="press.isContact != 'Y'" style="color: red;">（可选）</text>
      </view>

      <!-- 联系方式from表单 -->
      <uni-forms ref="form" :modelValue="press" :rules="rules">
        <!-- 微信号input输入框 -->
        <uni-forms-item label="微信号" name="wxNumber" class="display-default form-item-contact">
          <uni-easyinput v-model="press.wxNumber" placeholder="输入wx号" :maxlength="24" />
        </uni-forms-item>
        <!-- QQ号input输入框 -->
        <uni-forms-item label="QQ号" name="qqNumber" class="display-default form-item-contact">
          <uni-easyinput type="number" v-model="press.qqNumber" placeholder="输入QQ号" :maxlength="11" />
        </uni-forms-item>
        <!-- 手机号input输入框 -->
        <uni-forms-item label="手机号" name="phoneNumber" class="display-default form-item-contact">
          <uni-easyinput class="input-phoneNumber" :maxlength="11" type="number" v-model="press.phoneNumber"
            placeholder="+86 输入11位的手机号码" @blur="inputPhoneNumberBule" />
        </uni-forms-item>
      </uni-forms>
    </view>

    <!-- 分割线 -->
    <view class="halving-line"></view>
  </view>
</template>

<script>
  export default {
    data() {
      return {
        // from表单校验规则
        rules: {
          phoneNumber: {
            rules: [{
              pattern: /^[1]([3-9])[0-9]{9}$/,
              errorMessage: '手机号不合法',
            }]
          }
        },
        // 上传的图片数组
        filesImageList: [],
        // 上传的视频数组
        filesVideoList: [],
        // 表情数组
        expressionListOne: [
          '😃', '🙃', '😍', '😙', '😛', '😬', '😄', '😉', '☺', '😘', '😚', '🤑', '😁', '😅', '😊', '😋', '😜', '😎',
          '😂', '🤣', '😱'
        ],
        expressionListTwo: [
          '🤗', '😑', '🤫', '😞', '😔', '😣', '😤', '😏', '😒', '🤔', '😟', '😕', '😖', '😮', '😶', '🙄', '🤨', '😠',
          '🙁', '😫', '🥵'
        ],
        // 上一页面传来的pressId
        pressId: '',
        // 根据pressId获取到的咨询详情信息
        // 初始化一部分属性，不然会报错
        press: {
          pressImagesList: [],
          // 发布内容
          content: ''
        },
        token: ''
      };
    },
    async onLoad(e) {
      uni.showLoading({
        title: '正在加载中...'
      })
      this.token = await uni.getStorageSync('token')
      this.pressId = e.pressId

      await this.getPressByPressId()

      // 获取当前省份信息
      uni.getLocation({
        type: "gcj02",
        geocode: true,
        success: (res) => {
          // 获取 湖南省 字符串
          let province = res.address.province

          // 从索引为0的位置，截取province.length - 1个长度返回
          this.press.publishProvince = province.slice(0, province.length - 1);
        }
      })

      uni.hideLoading()
    },
    // 右上角按钮，保存
    async onNavigationBarButtonTap(e) {
      // 保存所编辑的内容信息
      // 并返回上一页面
      // 判断是否为必填类型
      if (this.press.isContact == 'Y') {
        // 3个输入框其中必须有一个有值
        if (this.press.wxNumber || this.press.qqNumber || this.press.phoneNumber) {
          this.$refs.form.validate().then(res => {
            console.log('表单数据信息：', JSON.stringify(res));
          }).catch(err => {
            console.log('表单错误信息：', JSON.stringify(err));
            uni.showToast({
              title: '手机号不合法！',
              icon: 'none',
              position: 'center'
            });
            return
          })
        } else {
          uni.showToast({
            title: '请至少选择一种联系方式！',
            icon: 'none',
            position: 'center'
          });
          return
        }
      }

      // 判断是否为非必填类型
      if (this.press.isContact == 'Y-N') {
        this.$refs.form.validate().then(res => {
          console.log('表单数据信息：', JSON.stringify(res));
        }).catch(err => {
          console.log('表单错误信息：', JSON.stringify(err));
          uni.showToast({
            title: '手机号不合法！',
            icon: 'none',
            position: 'center'
          });
          return
        })
      }

      // 判断富文本框是否有内容
      if (!this.press.content) {
        uni.showToast({
          title: '请输入发布内容！',
          icon: 'none',
          position: 'center'
        });
        return
      }

      // 判断富文本框是否大于10个字符
      if (this.press.content.length < 10) {
        uni.showToast({
          title: '发布内容字数需要大于10个字符！',
          icon: 'none',
          position: 'center'
        });
        return
      }

      // 显示Loading提示框
      uni.showLoading({
        title: '正在提交...',
        mask: false
      });


      // 判断发布省区是否为空，为空就自动赋值为 未知
      if (!this.press.publishProvince) {
        this.press.publishProvince = '未知'
      }

      // 新的文件列表
      // 要上传的文件列表
      // 对图片列表进行格式化提交，json格式提交
      let newFilesImageList = []
      // 旧的文件列表
      // 不需要格式化，直接和服务器返回回来的文件名称/路径进行拼接
      // 注意，旧文件列表在前，新文件列表在后，字符串提交
      let oldFilesImageList = ''
      let num = 0 // 设置一个可以字段增长的编号

      if (this.press.pressImagesList && this.press.pressImagesList != null) {
        for (var i = 0; i < this.press.pressImagesList.length; i++) {
          if (this.press.pressImagesList[i].substr(0, 4) == 'file' || this.press.pressImagesList[i].substr(0, 4) ==
            'blob') {
            // 这是新文件列表，需要提交到服务器
            newFilesImageList.push({
              "name": 'files' + num, // 编号不能跟着i走，必须是0 , 1 , 2 , 3...
              "uri": this.press.pressImagesList[i]
            })
            num++;
          } else {
            // 这是旧文件列表，不需要提交到服务器
            if (i == 0) {
              // 第一个文件不需要拼接
              oldFilesImageList += this.press.pressImagesList[i]
            } else {
              // 后面的文件都需要拼接，需要提交到服务器
              oldFilesImageList += (';' + this.press.pressImagesList[i])
            }
          }
        }
      }

      console.log("oldFilesImageList: ", oldFilesImageList);

      // 如果有新图片，要先上传图片
      if (newFilesImageList.length > 0) {
        console.log("newFilesImageList: " + JSON.stringify(newFilesImageList));

        await uni.uploadFile({
          url: this.$url + 'common/upload',
          files: newFilesImageList, // 要上传的文件列表 
          formData: {
            'type': 'pressImage',
            "num": newFilesImageList.length
          },
          header: {
            "Authorization": this.token
          },
          success: (res) => {
            // console.log("res: " + JSON.stringify(res));
            let data = JSON.parse(res.data)
            // console.log("data: " + JSON.stringify(data));

            if (data.code == 401) {
              uni.showToast({
                title: data.msg,
                icon: 'none',
                position: 'center'
              })
              return
            }
            if (!data.code) {
              uni.showToast({
                title: '服务器开小差了',
                icon: 'none',
                position: 'center'
              });
              return
            }

            let imageUrls = data.data.url

            console.log("oldFilesImageList: " + JSON.stringify(oldFilesImageList));
            console.log("imageUrls: " + JSON.stringify(imageUrls));

            imageUrls = (oldFilesImageList += (';' + imageUrls)) // 旧文件列表+新文件列表拼接起来

            console.log("旧新文件列表拼接后imageUrls: " + JSON.stringify(imageUrls));

            // 将上传完后端返回回来的图片路径存入，其中多个图片路径用;分割
            this.press.pressImages = imageUrls

            // 提交数据并返回首页
            this.$http.user.editPressByPressIdAndUid(this.token, this.press).then(res => {
              console.log("res: " + JSON.stringify(res));
              if (res.code == 401) {
                uni.showToast({
                  title: res.msg,
                  icon: 'none',
                  position: 'center'
                })
                return
              }
              if (!res.code) {
                uni.showToast({
                  title: '服务器开小差了',
                  icon: 'none',
                  position: 'center'
                });
                return
              }

              uni.showToast({
                title: '修改成功！',
                icon: 'none',
                position: 'center'
              });

              // 设置返回消息体
              uni.setStorageSync('isPressEdit', true)

              // 隐藏Loading提示框
              uni.hideLoading()

              // 修改成功，延迟500ms后返回
              setTimeout(() => {
                uni.navigateBack()
              }, 500)
            }).catch(err => {
              console.log("err: " + JSON.stringify(err));
            })
          },
          fail: (err) => {
            console.log("err: " + JSON.stringify(err));
            uni.showToast({
              title: '服务器开小差了',
              icon: 'none',
              position: 'center'
            });
          }
        })
      } else {
        this.press.pressImages = oldFilesImageList
        // 提交数据并返回首页
        this.$http.user.editPressByPressIdAndUid(this.token, this.press).then(res => {
          console.log("res: " + JSON.stringify(res));
          if (res.code == 401) {
            // 隐藏Loading提示框
            uni.hideLoading()
            uni.showToast({
              title: res.msg,
              icon: 'none',
              position: 'center'
            })
            return
          }
          if (!res.code) {
            // 隐藏Loading提示框
            uni.hideLoading()
            uni.showToast({
              title: '服务器开小差了',
              icon: 'none',
              position: 'center'
            });
            return
          }

          uni.showToast({
            title: '修改成功！',
            icon: 'none',
            position: 'center'
          });

          // 设置返回消息体
          uni.setStorageSync('isPressEdit', true)

          // 隐藏Loading提示框
          uni.hideLoading()

          // 修改成功，延迟500ms后返回
          setTimeout(() => {
            uni.navigateBack()
          }, 500)
        }).catch(err => {
          console.log("err: " + JSON.stringify(err));
        })
      }
    },
    methods: {
      /**
       * @description 手机号输入框失去焦点时触发
       */
      inputPhoneNumberBule() {
        this.$refs.form.validate().then(res => {
          console.log('表单数据信息：', JSON.stringify(res));
        }).catch(err => {
          console.log('表单错误信息：', JSON.stringify(err));
        })
      },
      /**
       * @deprecated 根据pressId获取咨询详情
       */
      async getPressByPressId() {
        await this.$http.press.getPressInfoByPressId(this.token, this.pressId).then(res => {
          console.log("res: " + JSON.stringify(res));

          if (res.code == 401) {
            uni.showToast({
              title: res.msg,
              icon: 'none',
              position: 'center'
            })
            if (res.msg == '话题已删除') {
              // 取消正在加载的加载框
              uni.hideLoading()
              // 向上级页面携带返回消息体
              uni.setStorageSync('isPressDetail', true)
              //返回上一页面
              uni.navigateBack({
                delta: 1
              })
            }
            return
          }
          if (!res.code) {
            uni.showToast({
              title: '服务器开小差了',
              icon: 'none',
              position: 'center'
            });
            return
          }


          this.press = res.data
        }).catch(err => {
          console.log("err: " + JSON.stringify(err));
        })
      },
      /**
       * @description 点击选择表情
       */
      openExpression() {
        this.$refs.popupExpression.open()
      },

      /**
       * @description 打开选择图片文件
       */
      openImage() {
        if (this.press.pressImagesList && this.press.pressImagesList != null) {
            let selectImageNum = 9 - this.press.pressImagesList.length
            if (selectImageNum) {
              uni.chooseImage({
                count: selectImageNum,
                success: (e) => {
                  console.log("e: " + JSON.stringify(e));
                  // 将选择后的图片数组和现有的进行合并
                  this.press.pressImagesList = this.press.pressImagesList.concat(e.tempFilePaths)
                }
              })
            } else {
              uni.showToast({
                title: '你最多只能选择9张图片',
                icon: 'none',
                position: 'center'
              });
            }
          }
        },

        // 预览多张图片 
        previewImage(imgUrl, index) {
            console.log("imgUrl: ", imgUrl);
            let formatImgList = [] // 临时数组资源
            let formatImgUrl = '' // 临时数据

            if (imgUrl.substr(0, 4) == 'file' || imgUrl.substr(0, 4) == 'blob') { // 开头为'file'的就是临时图片路径
              formatImgUrl = imgUrl // 如果是临时图片路径，不需要加$url域名
            } else {
              formatImgUrl = this.$url + imgUrl
            }

            for (let i = 0; i < this.press.pressImagesList.length; i++) {
              if (this.press.pressImagesList[i].substr(0, 4) == 'file' || this.press.pressImagesList[i].substr(0, 4) ==
                'blob') {
                formatImgList.push(this.press.pressImagesList[i]) // 如果是临时图片路径，不需要加$url域名
              } else {
                formatImgList.push(this.$url + this.press.pressImagesList[i])
              }
            }

            uni.previewImage({
              urls: formatImgList, //需要预览的图片http链接列表，多张的时候，url直接写在后面就行了
              current: formatImgUrl // 当前显示图片的http链接，默认是第一个
            })
          },

          /** 
           * @description 删除图片
           */
          delImageFile(index) {
            this.press.pressImagesList.splice(index, 1)
          },

          /**
           * @description 打开选择视频文件
           */
          openVideo() {
            let selectVideoNum = 1 - this.filesVideoList.length
            if (selectVideoNum) {
              uni.chooseVideo({
                success: (e) => {
                  console.log(e);
                  console.log("e: " + JSON.stringify(e.tempFilePath));
                  this.filesVideoList = this.filesVideoList.concat(e.tempFilePaths)
                }
              })
            }
          },

          /**
           * @description 删除视频
           */
          delVideoFile(index) {
            this.filesVideoList.splice(index, 1)
          },

          /**
           * @description 点击下面加号可选择图片或视频文件
           */
          choose() {
            uni.showActionSheet({
              itemList: ['A', 'B', 'C'],
              success: function(res) {
                console.log('选中了第' + (res.tapIndex + 1) + '个按钮');
              },
              fail: function(res) {
                console.log(res.errMsg);
              }
            });
          },

          /**
           * @description 点击表情时触发
           * @param item 表情的item项
           */
          expressionItemClick(item) {
            // 截取光标之前的数值
            let str1 = this.press.content.substring(0, this.inputTextRangeEndNum);
            // 截取光标之后的数值
            let str2 = this.press.content.substring(this.inputTextRangeEndNum, this.press.content.length);

            // 将 之前的值 + 表情 + 之后的值 = 合起来
            this.press.content = str1 + item + str2
          }
      }
    }
</script>

<style lang="scss">
  page {
    background: #fff;
  }

  // 富文本输入框自定义样式
  /deep/ .uni-textarea-textarea,
  /deep/ .uni-textarea-compute {
    font-size: 18px;
  }

  // 内容字数记录
  .content-record {
    display: flex;
    justify-content: flex-end;
    color: #7d7d7d;
    padding-bottom: 30rpx;
  }

  // 联系方式form表单，item项
  .form-item-contact {
    padding: 10rpx 50rpx;
  }

  //分割线
  .halving-line {
    border-bottom: 1px solid #f0f0f0;
  }

  // 表情，图片，视频图标点击
  .expression-img-video {
    display: flex;
    justify-content: space-between;
    border-bottom: 1px solid #f0f0f0;

    & .select-icon {
      width: 50rpx;
      height: 50rpx;
      margin-right: 30rpx;
    }
  }

  // 上传加号框-列表
  .file-picker__container {
    /* #ifndef APP-NVUE */
    box-sizing: border-box;
    /* #endif */
    display: flex;
    flex-wrap: wrap;
    position: relative;
    margin-top: 20rpx;

    // 上传加号框-item项
    & .file-picker__box {
      /* #ifndef APP-NVUE */
      box-sizing: border-box;
      /* #endif */
      position: relative;
      // flex: 0 0 33.3%;
      width: 33.3%;
      height: 0;
      padding-top: 33.33%;

      & .file-picker__box-content {
        position: absolute;
        top: 0;
        right: 0;
        bottom: 0;
        left: 0;
        margin: 5px;
        border-radius: 5px;
        // 这个会把删除-号遮盖
        // overflow: hidden;

        & .file-image {
          width: 100%;
          height: 100%;
        }

        // 删除
        & .icon-del-box {
          /* #ifndef APP-NVUE */
          display: flex;
          /* #endif */
          align-items: center;
          justify-content: center;
          position: absolute;
          top: -5px;
          right: -5px;
          height: 26px;
          width: 26px;
          border-radius: 50%;
          background-color: #ff4a4a;
          z-index: 2;
          // transform: rotate(-45deg);

          & .icon-del {
            width: 15px;
            height: 2px;
            background-color: #fff;
            border-radius: 2px;
          }

          & .rotate-del {
            position: absolute;
            // transform: rotate(90deg);
          }
        }

        // 添加
        & .icon-add {
          width: 80rpx;
          height: 8rpx;
          background-color: #f1f1f1;
          border-radius: 2px;
        }

        & .rotate-add {
          position: absolute;
          transform: rotate(90deg);
        }
      }

      & .is-add {
        /* #ifndef APP-NVUE */
        display: flex;
        /* #endif */
        align-items: center;
        justify-content: center;
      }
    }
  }

  // 表情，图片，视频图标点击
  .expression-img-video {
    display: flex;
    justify-content: space-between;
    border-bottom: 1px solid #f0f0f0;

    & .select-icon {
      width: 50rpx;
      height: 50rpx;
      margin-right: 30rpx;
    }
  }

  // 选择表情，轮播图选择
  .select-expression {
    background: #fff;
    box-shadow: 0px 0px 10px #f0f0f0;
    height: 400rpx;
  }
</style>
